<template>
  <div class="w-full bg-white mt-4" v-loading="loading">
    <div style="display: flex; justify-content: space-between">
      <div class="flex">
        <div class="data-block-item">
          <div class="data-label">{{ $t('common.flypass_chart') }}</div>
        </div>
      </div>
      <el-popover :width="500" v-model="visible" trigger="click">
        <template #reference>
          <el-button type="primary" size="medium" class="mt-4 mr-4">
            <el-icon>
              <Filter />
            </el-icon>
          </el-button>
        </template>

        <div class="popover-setting">
          <h2 class="mb-3 mt-2" style="width: 100%; font-size: 1.2em; text-align: center">
            {{ $t('page.filter_settings') }}
          </h2>

          <div class="filter-title flex justify-between items-center">
            <span>{{ $t('modules.data_center.device_analyze.date_unit') }}: </span>
            <div class="set-value">
              <el-radio
                v-for="obj in dateFilterData"
                :key="obj.value"
                v-model="config.dateUnit"
                :label="obj.value"
                @change="changeDateUnit"
              >
                {{ $t(obj.label) }}</el-radio
              >
            </div>
          </div>

          <div class="filter-title flex justify-between items-center">
            <span>{{ $t('modules.data_center.device_analyze.date_range') }}: </span>
            <div class="set-value">
              <el-radio
                v-for="range in getDateRange(config.dateUnit)"
                :key="range"
                v-model="config.dateRange"
                :label="range"
                >{{ range }} {{ $t(config.dateLabel) }}</el-radio
              >
            </div>
          </div>

          <div class="mt-3 text-right">
            <el-button type="primary" @click="getMemberLineChart()">{{
              $t('common.confirm')
            }}</el-button>
          </div>
        </div>
      </el-popover>
    </div>
    <div ref="chart" :style="{ width: '100%', height: '500px' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { getMemberPass } from '@/api/pass-center'

export default {
  mixins: [resize],
  props: ['storeUuid', 'width', 'origin'],
  data() {
    return {
      options: [
        {
          value: 7,
          label: this.$t('modules.tms.group.day_7')
        },
        {
          value: 14,
          label: this.$t('modules.tms.group.day_14')
        },
        {
          value: 30,
          label: this.$t('modules.tms.group.month_1')
        },
        {
          value: 90,
          label: this.$t('modules.tms.group.month_3')
        },
        {
          value: 180,
          label: this.$t('modules.tms.group.month_6')
        }
      ],
      config: {
        dateUnit: 1,
        dateRange: 7,
        dateLabel: 'common.day'
      },
      radioChoose: 'PURCHASE',
      checkType: [
        'PURCHASE',
        'VOID',
        'REFUND',
        'AUTHORIZATION',
        'AUTHORIZATION_CAPTURE',
        'CASHBACK',
        'CASH_ADVANCE'
      ],
      loading: false,
      typeRadio: 1,
      xAxisData: [],
      yaxisData: []
    }
  },
  watch: {
    '$i18n.locale': function (newLocale, oldLocale) {
      this.fetchData(this.storeUuid)
    }
  },
  mounted() {
    // 初始化 echarts 图表
    this.chart = echarts.init(this.$refs.chart)
    this.getMemberLineChart()
  },
  computed: {
    dateFilterData() {
      return [
        {
          label: 'common.day',
          value: 1,
          range: [7, 14]
        },
        // {
        //   label: 'page.week',
        //   value: 2,
        //   range: [2, 4, 8]
        // },
        {
          label: 'common.month',
          value: 2,
          range: [3, 6, 12]
        }
      ]
    }
  },
  methods: {
    getMemberLineChart() {
      let params = {
        unit: this.config.dateUnit,
        range: this.config.dateRange
      }
      getMemberPass(params)
        .then((res) => {
          this.xAxisData = res.timeList
          this.yAxisData = res.statDataList
          console.log('xAxisData', this.xAxisData, this.yAxisData)
          this.renderChart()
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    renderChart() {
      // 在这里设置图表的数据和配置
      const option = {
        color: ['#003a8c'], // 根据实际折线的颜色设置legend的颜色
        toolbox: {
          feature: {
            saveAsImage: {
              show: false // 隐藏下载按钮
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross' // 设置 axisPointer 为十字准星
          },
          backgroundColor: 'white', // 设置 tooltip 背景颜色
          textStyle: {
            color: 'black' // 设置 tooltip 文本颜色
          }
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData,
        },
        yAxis: [
          {
            type: 'value',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#003a8c'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: {
          smooth: true,
          type: 'line',
          data: this.yAxisData,
          lineStyle: {
            color: '#003a8c'
          },
          symbol: 'none', // 去掉空心点
          areaStyle: {
            // 添加渐变面积图
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(50, 58, 220, 0.3)' },
              { offset: 1, color: 'rgba(0, 58, 140, 0)' }
            ])
          }
        }
      }
      echarts.init(this.$refs.chart).setOption(option)
    },
    getDateRange(dateUnit) {
      if (dateUnit === undefined) {
        return []
      }
      for (let i = 0; i < this.dateFilterData.length; i++) {
        if (this.dateFilterData[i].value === dateUnit) {
          return this.dateFilterData[i].range
        }
      }
      return []
    },
    changeDateUnit(val) {
      const unit = this.dateFilterData.find((o) => o.value === val)
      this.config = {
        dateUnit: val,
        dateRange: unit.range[0],
        dateLabel: unit.label
      }
    }
  }
}
</script>

<style></style>

<style scoped lang="scss">
// :deep(.el-checkbox){
//   height:32px;
// }
.transType {
  // padding:28px 5px;
  width: 100%;
  display: flex;
  justify-content: end;
  margin-right: 32px;
}

.list-item {
  font-size: 14px;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
  height: 34px;
  line-height: 34px;
  cursor: pointer;
}

.filter-title {
  padding: 12px 5px;
  border-bottom: 1px solid var(--card-border-color);
  font-weight: 500;
}
.el-checkbox-group {
  padding: 0px;
  .list-group-item {
    padding: 8px 10px;
    border-bottom: 1px solid var(--card-border-color);
    /*&:last-of-type  {*/
    /*border-bottom: 0px;*/
    /*}*/
    &:hover {
      background-color: var(--card-border-color);
    }
  }
}

.data-block-item {
  min-width: 200px;
  position: relative;
  // cursor: pointer;
  background: #fff;
  padding: 14px 24px;
  text-align: center;
  // &:hover {
  //   background-color: #fff;
  // }
  .data-label {
    font-size: 14px;
    font-weight: normal;
    line-height: 21px;
    color: var(--el-color-primary);
    font-weight: 500;
    text-align: left;
  }
}

.actived {
  background-color: #fff;
  border-bottom: solid 2px var(--el-color-primary);
}
</style>
